<template>
  <div class="container" @click="handleGallaryClick" >
    <div class="wrapper" >
      <swiper :options="swiperOptions">
        <swiper-slide
          v-for="(item, index) in imgs"
          :key="index"
        >
          <img class="gallary-img" :src="item" />
        </swiper-slide>
        <!--<swiper-slide >-->
          <!--<img class="gallary-img" src="//img1.qunarzz.com/sight/p0/1501/d0/d00d72664c3e73d8.water.jpg_600x330_20d81a68.jpg" />-->
        <!--</swiper-slide>-->
        <!--<swiper-slide >-->
          <!--<img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/64/64e5d5cb56065afd.water.jpg_350x240_36758ffc.jpg" />-->
        <!--</swiper-slide>-->
        <!--<swiper-slide >-->
          <!--<img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/d6/d68473e407962ff3.water.jpg_350x240_a83cd4a3.jpg" />-->
        <!--</swiper-slide>-->
        <!--<swiper-slide >-->
          <!--<img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1501/a2/a2605b5b1aeb1c6d.water.jpg_350x240_e660367d.jpg" />-->
        <!--</swiper-slide>-->
        <!--  页条  -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      show:false,
      swiperOptions: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        //  循环轮播
        loop: true,
        //  下面这两个属性，代表当dom结构变化的时候，自我刷新，来解决轮播的宽度计算的问题
        observeParents: true,
        observer: true
      },
      imgss:[
        'http://img1.qunarzz.com/sight/p0/1501/d0/d00d72664c3e73d8.water.jpg_350x240_4d2c58d5.jpg',
        'http://img1.qunarzz.com/sight/p0/1501/6d/6da2214f48a9e93a.water.jpg_350x240_34c0c85f.jpg',
        'http://img1.qunarzz.com/sight/p0/201403/07/e706489fc18be7f211e6f0d55ecc48cf.jpg_350x240_24b831cd.jpg',
        'http://img1.qunarzz.com/sight/p0/1501/d6/d68473e407962ff3.water.jpg_350x240_a83cd4a3.jpg',
        'http://img1.qunarzz.com/sight/p0/201403/07/96082a4d84c8656e3be740f67bcd70ce.jpg_350x240_c5796659.jpg'
      ]
    }
  },
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
  /*  样式穿透写法，修改组件库的样式，你可以应用到element-ui上 */
  /*  overflow: hiddin  分页条不能有这个样式，否则不显示 */
  .container >>> .swiper-container
    overflow: inherit

  .container
    display: flex
    flex-direction: column
    justify-content: center
    /*   越大越优先显示*/
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000
    .wrapper
      height: 0
      width: 100%
      padding-bottom: 100%
      .gallary-img
        width: 100%
      .swiper-pagination
        color: #fff
        /*  这里是调整页条的位置，你看看网页源代码的样式你就知道了 */
        /*  又因为上面用的是flex布局，还有justify-content。。所以他是居中的 */
        bottom: -1rem
</style>
